{% extends "base.html" %}

{% block title %}用户登录 - 风之宿{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-100 p-4 sm:p-6 lg:p-8">
  <!-- 装饰元素 - 在移动设备上缩小 -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-20 -right-20 w-40 h-40 sm:w-60 sm:h-60 md:w-80 md:h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
    <div class="absolute top-20 -left-10 w-40 h-40 sm:w-60 sm:h-60 md:w-80 md:h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-20 left-10 w-40 h-40 sm:w-60 sm:h-60 md:w-80 md:h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
  </div>

  <div class="relative w-full max-w-md">
    <!-- 登录卡片 - 响应式阴影和圆角 -->
    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg sm:shadow-xl overflow-hidden transition-all duration-300 hover:shadow-xl sm:hover:shadow-2xl">
      <!-- 卡片头部 -->
      <div class="p-5 sm:p-6 md:p-8 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
        <div class="flex justify-center mb-3 sm:mb-4">
          <!-- 品牌图标 - 响应式大小 -->
          <div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 rounded-full bg-white/10 flex items-center justify-center">
            <i class="fa fa-bed text-xl sm:text-2xl"></i>
          </div>
        </div>
        <h2 class="text-center text-xl sm:text-2xl font-bold tracking-tight">
          风之宿
        </h2>
        <p class="mt-2 text-center text-indigo-100 text-xs sm:text-sm">
          欢迎回来，请登录您的账户
        </p>
      </div>

      <!-- 表单区域 -->
      <div class="p-5 sm:p-6 md:p-8">
        <form class="mt-5 space-y-4 sm:space-y-5" method="POST">
    {% csrf_token %}
          <!-- 显示消息提示 -->
          {% if messages %}
              {% for message in messages %}
                <div class="p-3 rounded-lg text-sm {% if message.tags == 'error' %}bg-red-50 text-red-600{% else %}bg-green-50 text-green-600{% endif %}">
                  {{ message }}
                </div>
              {% endfor %}
            {% endif %}

          <!-- 用户名输入 -->
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-user text-gray-400"></i>
              </div>
              <input id="username" name="username" type="text" required
                class="pl-10 block w-full px-4 py-2 sm:py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 text-sm"
                placeholder="请输入用户名">
            </div>
          </div>

          <!-- 密码输入 -->
          <div>
            <div class="flex justify-between items-center mb-1">
              <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
              <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500 transition-colors">
                忘记密码?
              </a>
            </div>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
              </div>
              <input id="password" name="password" type="password" required
                class="pl-10 block w-full px-4 py-2 sm:py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 text-sm"
                placeholder="请输入密码">
            </div>
          </div>

          <!-- 记住我选项 -->
          <div class="flex items-center">
            <div class="flex items-center h-5">
              <input id="remember_me" name="remember_me" type="checkbox"
                class="w-4 h-4 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 transition-colors">
            </div>
            <div class="ml-3 text-sm">
              <label for="remember_me" class="text-gray-600">记住我的登录状态</label>
            </div>
          </div>

          <!-- 登录按钮 - 响应式大小 -->
          <div>
            <button type="submit"
              class="w-full flex justify-center py-2 sm:py-2.5 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98]">
              登录账户
            </button>
          </div>
        </form>

        <!-- 分隔线 -->
        <div class="relative my-5 sm:my-6">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-200"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500">或</span>
          </div>
        </div>

        <!-- 注册链接 - 响应式按钮大小 -->
        <div class="text-center">
          <a href="{% url 'user:user_register' %}"
            class="inline-flex items-center px-3 sm:px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
            <i class="fa fa-user-plus mr-2"></i> 创建新账户
          </a>
        </div>
      </div>
    </div>

    <!-- 页脚 - 在小屏幕上缩小 -->
    <p class="mt-4 sm:mt-6 text-center text-xs sm:text-sm text-gray-500">
      &copy; 2023 风之宿. 保留所有权利.
    </p>
  </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
  /* 动画效果 - 在移动设备上调整速度 */
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }

  .animate-blob {
    animation: blob 8s infinite;
  }

  @media (max-width: 640px) {
    .animate-blob {
      animation: blob 10s infinite;
    }
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>
{% endblock %}
